import * as THREE from "three"
import  { OrbitControls, MapControls } from "three/examples/jsm/controls/OrbitControls";
class ShapeShaoMiao {

    scene: THREE.Scene
    camera: THREE.OrthographicCamera
    renderer: THREE.WebGLRenderer
    mesh: THREE.Mesh

    controls: any
    clock: THREE.Clock = new THREE.Clock()
    T0: Date
    constructor() {
      var scene = new THREE.Scene();
      /**
       * 创建网格模型
       */
       var shape = new THREE.Shape();
       /**四条直线绘制一个矩形轮廓*/
       shape.moveTo(0,0);//起点
       shape.lineTo(0,10);//第2点
       shape.lineTo(10,10);//第3点
       shape.lineTo(10,0);//第4点
       shape.lineTo(0,0);//第5点
       /**创建轮廓的扫描轨迹(3D样条曲线)*/
       var curve = new THREE.CatmullRomCurve3( [
        new THREE.Vector3( -10, -50, -50 ),
        new THREE.Vector3( 10, 0, 0 ),
        new THREE.Vector3( 8, 50, 50 ),
        new THREE.Vector3( -5, 0, 100)
    ]);

       var geometry = new THREE.ExtrudeGeometry(//拉伸造型
           shape,//二维轮廓
           //拉伸参数
           {
               bevelEnabled:true,//无倒角
               extrudePath:curve,//选择扫描轨迹
               steps:50//沿着路径细分数s
           }
       );
      var material = new THREE.MeshPhongMaterial({
        color: 0xff00ff,
        side: THREE.DoubleSide ,//两面可见
        wireframe:true
      }); //材质对象
      var mesh = new THREE.Mesh(geometry, material); //网格模型对象
      scene.add(mesh); //网格模型添加到场景中
    /**
     * 相机设置
     */
    var width = window.innerWidth; //窗口宽度
    var height = window.innerHeight; //窗口高度
    var k = width / height; //窗口宽高比
    var s = 150; //三维场景显示范围控制系数，系数越大，显示的范围越大
    //创建相机对象
    var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
    camera.position.set(200, 300, 200); //设置相机位置
    camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
    /**
     * 创建渲染器对象
     */
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height); //设置渲染区域尺寸
    renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
    document.body.appendChild(renderer.domElement); //body元素中插入canvas对象

    // 渲染函数
    function render() {
      renderer.render(scene, camera); //执行渲染操作
    }
    render();

    var controls = new OrbitControls(camera,renderer.domElement);//创建控件对象
    controls.addEventListener('change', render);//监听鼠标、键盘事件
  
    }
}

export {ShapeShaoMiao}
